import { reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
import page from './page.ts';
import { useRouter, useRoute } from 'vue-router';
import { sendMsg } from '@/utils/crossTagMag';
export function useListComponent() {
  const router = useRouter();
  const route = useRoute();
  const { proxy } = getCurrentInstance() as any;
  //页面信息
  const dataInfo: any = reactive({
    loading: false, //加载
    loadingMsg: '列表数据加载中', //加载
    //分类
    tabs: {
      title: '基础数据', //分类
      search: '', //搜索
      activeKey: 'dictionaryCode', //唯一值key
      titleKey: 'dictionaryName', //唯一值key
      active: '', //选中值
      list: [], //数据
      //分类操作
      // operation: [
      //   {
      //     title: '编辑',
      //     icon: 'Edit',
      //     click: (row: any, index: number) => {
      //       console.log('编辑按钮');
      //     },
      //   },
      //   {
      //     title: '删除',
      //     icon: 'Delete',
      //     click: (row: any, index: number) => {
      //       console.log('删除按钮');
      //     },
      //   },
      // ],
      //分类点击列表
      click: (row: any, index: number) => {
        clickTabs(row);
      },
      //分类新建按钮
      // clickAdd: () => {
      //   console.log('新建按钮');
      // },
    },
    table: {
      title: page.title, //表格-标题
      //表格-内容数据
      tbody: [],
      theadCode: 'basedatatable', //basedatatable
      //表格-表头数据
      thead: [
        {
          label: '基本信息',
          prop: 'code',
          hidden: false,
          align: 'center',
          tooltip: false,
          width: 154,
          fixed: false,
          children: [
            {
              label: '数据编码',
              prop: 'dicValueCode',
              hidden: false,
              align: 'center',
              tooltip: false,
              width: 154,
              fixed: false,
              children: [
                {
                  label: '数据编码',
                  prop: 'dicValueCode',
                  hidden: false,
                  align: 'center',
                  tooltip: false,
                  width: 154,
                  fixed: false,
                },
                {
                  label: '数据状态',
                  prop: 'dicValueStateName',
                  hidden: false,
                  align: 'center',
                  tooltip: false,
                  width: 70,
                  fixed: false,
                },
                {
                  label: '数据名称',
                  prop: 'displayValue',
                  hidden: false,
                  align: 'left',
                  tooltip: false,
                  width: 232,
                  fixed: false,
                },
                {
                  label: '数据编号',
                  prop: 'dicValueID',
                  hidden: false,
                  align: 'center',
                  tooltip: false,
                  width: 72,
                  fixed: false,
                },
                {
                  label: '字典编码',
                  prop: 'dictionaryCode',
                  hidden: false,
                  align: 'center',
                  tooltip: false,
                  width: 109,
                  fixed: false,
                },
              ],
            },
            {
              label: '数据状态',
              prop: 'dicValueStateName',
              hidden: false,
              align: 'center',
              tooltip: false,
              width: 70,
              fixed: false,
            },
            {
              label: '数据名称',
              prop: 'displayValue',
              hidden: false,
              align: 'left',
              tooltip: false,
              width: 232,
              fixed: false,
            },
            {
              label: '数据编号',
              prop: 'dicValueID',
              hidden: false,
              align: 'center',
              tooltip: false,
              width: 72,
              fixed: false,
            },
            {
              label: '字典编码',
              prop: 'dictionaryCode',
              hidden: false,
              align: 'center',
              tooltip: false,
              width: 109,
              fixed: false,
            },
          ],
        },
        {
          label: '排序号',
          prop: 'dicValueSort',
          hidden: false,
          align: 'center',
          tooltip: false,
          width: 80,
          fixed: false,
        },
        {
          label: '备注说明',
          prop: 'dicValueDesc',
          hidden: false,
          align: 'left',
          tooltip: false,
          width: null,
          fixed: false,
        },
      ],
      //表格-搜索数据
      search: {
        pageIndex: 1, //当前页码
        pageSize: 30, //每页显示数据的数量
        totalCount: 0, //总数量
        likeWords: '',
        dictionaryCode: 'Degree',
        dicValueState: '-1',
      },
      //多选
      checkbox: {
        state: true,
        selectable: (row: any) => {
          return true;
        },
        list: [],
      },
      //表格-按钮数据
      btns: [
        {
          title: '导出数据',
          icon: 'Download',
          type: '',
          children: [
            {
              title: '导出当页数据',
              click: () => {
                setLoading('导出当页数据,请稍等');
                exportBtn(dataInfo.table.tbody);
              },
            },
            {
              title: '导出全部数据',
              click: () => {
                setLoading('正在导出全部数据,请稍等');
                proxy.$api.System.QueryPageDictionaryValueDataList({
                  ...dataInfo.table.search,
                  dictionaryCode: dataInfo.tabs.active,
                  pageIndex: 1,
                  pageSize: 10000,
                })
                  .then((res: any) => {
                    exportBtn(res.list);
                  })
                  .catch(() => {
                    dataInfo.loading = false;
                  });
              },
            },
            {
              title: '导出选中数据',
              click: () => {
                setLoading('导出选中数据,请稍等');
                exportBtn(dataInfo.table.checkbox.list);
              },
            },
          ],
        },
        {
          title: '新建',
          icon: 'Plus',
          type: 'primary',
          click: () => {
            getPath({
              path: `${route.path}/details`,
              query: {
                dictionaryCode: dataInfo.tabs.active,
              },
            });
          },
        },
      ],
      //列表双击
      dblclick: (row: any) => {
        editBtn(row);
      },
      //表格-列表搜索
      operation: [
        {
          title: '编辑',
          click: (row: any) => {
            editBtn(row);
          },
        },
        {
          title: (row: any) => {
            return row.dicValueState === 1 ? '禁用' : '启用';
          },
          click: (row: any, index: number) => {
            proxy.$api.System.DisabledOrEnableDictionaryValue({
              dicValueID: row.dicValueID,
              isCanUse: row.dicValueState === 0,
            })
              .then((res: any) => {
                ElMessage({
                  message: `${row.dicValueState === 1 ? '禁用' : '启用'}成功`,
                  type: 'success',
                });
                getTbody();
              })
              .catch(() => {});
          },
        },
        {
          title: '删除',
          click: (row: any, index: number) => {
            proxy.$messageBox('是否删除当前数据，请确认！', () => {
              proxy.$api.System.DeleteDictionaryValue({
                dicValueID: row.dicValueID,
              })
                .then((res: any) => {
                  getTbody();
                })
                .catch(() => {});
            });
          },
        },
      ],
    },
    //详情样式
    details: {
      style: {
        width: '600px',
        margin: '16px auto',
        padding: '16px',
        background: '#fff',
        borderRadius: '2px',
      },
      form: {
        dicValueID: '',
        dictionaryCode: '',
        dicValueCode: '',
        displayValue: '',
        dicValue: '',
        dicValueDesc: '',
        dicValueSort: '',
        dicValueState: '',
        dicValueStateName: '',
      },
      formSet: [
        {
          label: '编号',
          key: 'dicValueID',
          formType: 'text',
          bind: {
            disabled: true,
          },
        },
        {
          label: '名称',
          key: 'displayValue',
          formType: 'text',
          isRules: true,
        },
        {
          label: '排序',
          key: 'dicValueSort',
          formType: 'number',
        },
        {
          label: '备注',
          key: 'dicValueDesc',
          formType: 'textarea',
        },
      ],
      //表格-按钮数据
      btns: [
        {
          title: '保存',
          icon: '',
          type: 'primary',
          click: (form: any) => {
            if (form.dicValueID) {
              proxy.$api.System.UpdateDictionaryValue(form)
                .then((res: any) => {
                  sendMsg('save', true);
                  window.close();
                })
                .catch(() => {});
            } else {
              proxy.$api.System.AddDictionaryValue(form)
                .then((res: any) => {
                  sendMsg('save', true);
                  window.close();
                })
                .catch(() => {});
            }
          },
        },
      ],
    },
  });

  // 获取tabs数据
  const editBtn = (row: any) => {
    getPath({
      path: `${route.path}/details`,
      query: row,
    });
  };
  // 获取tabs数据
  const getPath = (obj: any, row?: any) => {
    const path = router.resolve(obj);
    // 在新窗口或标签页中打开目标路径
    const newWindow: any = window.open(path.href, '_blank');
    newWindow;
  };
  // 获取tabs数据
  const getTabs = () => {
    setLoading();
    proxy.$api.System.GetBaseDictionaryDataList()
      .then((res: any) => {
        dataInfo.tabs.list = res;
        clickTabs(res[0]);
      })
      .catch(() => {});
  };
  // 获取tabs数据
  const clickTabs = (row: any) => {
    if (row) {
      dataInfo.tabs.active = row.dictionaryCode;
      dataInfo.table.checkbox.list = [];
      getTbody();
    }
  };
  // 获取表数据
  const getTbody = () => {
    let _table: any = dataInfo.table;
    setLoading();
    proxy.$api.System.QueryPageDictionaryValueDataList({
      ..._table.search,
      dictionaryCode: dataInfo.tabs.active,
    })
      .then((res: any) => {
        _table.tbody = res.list;
        _table.search.totalCount = res.totalCount;
        dataInfo.loading = false;
      })
      .catch(() => {
        dataInfo.loading = false;
      });
  };
  // 导出数据
  const exportBtn = (tbody: any[]) => {
    proxy.$exportData(
      {
        thead: dataInfo.table.thead,
        tbody: tbody,
        fileName: dataInfo.table.title,
      },
      dataInfo,
    );
    setTimeout(() => {
      dataInfo.loading = false;
    }, 1000);
  };
  const setLoading = (title: string = '正在获取数据,请稍等...') => {
    if (!dataInfo.loading) {
      dataInfo.loading = true;
      dataInfo.loadingMsg = title;
    }
  };
  // 组件挂载后执行
  onMounted(() => {
    getTabs();
  });
  // 组件卸载前执行
  onBeforeUnmount(() => {});
  return { dataInfo, getTbody };
}
